html,
body {
   /* height: 100%;*/
}


html {
     font-size: 14px; 

}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
   
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}


.form-group{
    margin-bottom: 10px;
}



/*
 *
 * Mariia css
 *
 */
@media(min-width: 992px){
    .chat-leftsidebar {
        min-width: 320px;
    }
}
@media(min-width: 1200px){
    .chat-leftsidebar {
        min-width: 350px;
    }
}

@media(max-width: 1400px){
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        padding-left: 7px;
        padding-right: 7px;
    }
    .row{
        margin-left: -7px;
        margin-right: -7px;
        padding: 0;
        width: auto;
        max-width: none;
    } 
    .row>[class^="col"]{
        padding-left: 7px;
        padding-right: 7px;
    }
}
@media(min-width: 993px) and (max-width: 1400px){  
    .navbar-brand-box,
    .vertical-menu {
        width: 200px
    } 
    .main-content {
        margin-left: 200px;
    }
    .col-lg-4{
        width: 33.33333%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-8{
        width: 66.66667%;
    }
    .col-lg-12{
        width: 100%;
    }
}
@media(max-width: 1400px){
    .card-body {
        padding: 15px;
    }
}
@media(max-width: 991px){
    .card .tab-content.p-3 {
        padding: 0!important;
    }
}
@media(max-width: 767px){
    .page-content{
        padding-left: 5px;
        padding-right: 5px;
    }
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        padding-left: 5px;
        padding-right: 5px;
    }
    .row{
        margin-left: -5px;
        margin-right: -5px;
    }
    .row>[class^="col"]{
        padding-left: 5px;
        padding-right: 5px;
    }

    .fc-header-toolbar {
        flex-wrap: wrap;
    }
    .fc-toolbar.fc-header-toolbar .fc-right {
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .card .p-4 {
        padding: 15px!important;
    }
    .card .p-3 {
        padding: 10px!important;
    }
    .chat-list li a {
        padding: 10px 15px;
    }
    .chat-leftsidebar .chat-leftsidebar-nav .tab-content {
        min-height: 400px;
    }
}
@media (max-width: 380px){
    .navbar-brand-box {
        display: block;
    }
}


/* RESPONSIVE TABLE */
.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 1100px) {
    .table-lg-card.large-only { display: none; }
    .table-lg-card.small-only { display: table; }
    .table-js-card.table-lg-card {
        border: 1px solid #eff2f7;
    }
    .table-js-card.table-lg-card tr:first-child {
        background-color: #eff2f7;
        border-bottom: 2px solid #64b9e6;
    }
    .table-lg-card td.st-key, .table-lg-card td.st-val {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
@media (min-width: 620px) and (max-width: 1100px){
    .table-lg-card.small-only {
        width: 48%;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
    }
}
@media (max-width: 767px) {
    .stacktable.large-only { display: none; }
    .stacktable.small-only { display: table; }

    .table-js .st-head-row {
        background-color: #eff2f7;
    }
    .table-js .st-head-row.st-head-row-main {
        display: none;
    }
    .table-nowrap.table-js td, .table-nowrap.table-js th{
        white-space: normal;
    }

    .table-js-card {
        border: 1px solid #eff2f7;
    }
    .table-js-card tr:first-child {
        background-color: #eff2f7;
    }
    td.st-key, td.st-val {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}



.text-right{
    text-align: right;
}


.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.fc-event{
    border: 0 !important;
}

.doubletr{
    border-bottom: 1px solid #333333; 
}

#calendar-menu .mm-active>a{
    color: #333333 !important;
}

#calendar-menu .mm-active{
    color: #333333 !important;
}


#calendar-menu ul {
    padding-left: 1.2rem;
    }


#calendar-menu .has-arrow:after {
    content: "\F0140";
    font-family: 'Material Design Icons';
    display: block;
    float: right;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
    font-size: 1rem;
}


#calendar-menu .has-arrow:after {
    top: 3px;
    right: 5px;
    position: absolute;
}

.text-small{
    font-size: 8pt;
}


.tdvertical {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}


 @media (min-width: 768px) {
  .navbar-header {
     float: none;
   }

}


.navbar-header:before, .navbar-header:after{
    display: block;
     content:none;
}


.table-rep-plugin .checkbox-row{
    padding-left: 20px;
}


.table-rep-plugin .dropdown-menu{

    width:  200px;

}



.table-rep-plugin .focus-btn-group{
    display: none;
}

.table-sm-font{
    font-size: 10pt;
}

.fc-event{
    text-align: left;
}


  .popper,
  .tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
  }
  .style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
  }

  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: #FFC107;
  }
  .style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: 5px;
  }
  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }
  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }


.table-responsive{
    clear: both;
}


.has-error .form-select{
    border: 1px solid red;
}

.has-error .form-control{
    border: 1px solid red;
}

.has-error .help-block{
    font-size: 9pt;
    color: red;
}




#eventinfo .avatar-md{
    width: 2.5em;
    height: 2.5em;
}


#eventinfo .font-size-15{
    font-size: 10pt !important;
}


#eventinfo .card-title{
    font-size: 10pt;
}

#eventinfo .table{
    font-size: 9pt;
}
/* datepicker css */
#smallcalendar .ui-datepicker {
     width: 100% !important; 
}

.mybold .ui-state-default{
    font-weight: bold !important;
    color: #ff5d03 !important;
}

.datepicker {
    border: 1px solid #eff2f7;
    padding: 8px;
    z-index: 9999!important;
}



.dataTables_wrapper .dropdown-item.active, .dataTables_wrapper .dropdown-item:active {
    color: #ffffff;
    text-decoration: none;
    background-color: #74788d;
}


.dataTables_wrapper .dropdown-item, .dataTables_wrapper .dropdown-item {
   border-bottom: 1px solid #cccccc;
}


.bg-violet {
    --bs-bg-opacity: 1;
    background-color: #c100f7 !important;
}


.ui-state-selected a
 {
   
    background: #f46a6a !important;
    color: #ffffff !important;
}



body[data-sidebar=dark] .mm-active>a.active_link {
    color: #fbeb38!important;
}

 .active_link {
    color: #fbeb38!important;
}



/*
 * Statistc page
*/
.link-dark:focus, .link-dark:hover {
    color: #000000;
}
.link-light:focus, .link-light:hover {
    color: #ffffff;
}
.page-statistic .dataTables_wrapper tbody td {
    background: #f5f5f5;
}
.page-statistic table.dataTable td, .page-statistic table.dataTable th {
    box-sizing: border-box!important;
    padding: 5px 5px;
}
.page-statistic table.dataTable tbody tr>.dtfc-fixed-left, 
.page-statistic table.dataTable tbody tr>.dtfc-fixed-right{
    background: #f5f5f5; 
}
.page-statistic div#datatable_filter {
    display: none;
}
@media (max-width:576px) {
    .page-statistic table.dataTable .dtfc-fixed-left {
        display: block;
        max-width: 200px;
        width: 200px;
        min-width: 200px!important;
    }
}



.pitem-autocomplete {
    display: flex;
    align-items: center;  /* Align items vertically */
    margin-bottom: 10px;  /* Space between items */
}

.pitem-autocomplete img {
    width: 40px;       /* Fixed width for image */
    height: 40px;      /* Fixed height for image */
    margin-right: 5px; /* Right margin for spacing */
}

.pitem-autocomplete span {
    
}

.pitem-autocomplete span.title {
    
    overflow: hidden; /* Prevents content from overflowing */

    margin-right: 10px; /* Adds space between the label and price */
	width: 600px
}

.pitem-autocomplete span.price{
    flex-shrink: 0; /* Prevents the price from shrinking */
    width: 100px;    /* Fixed width for price */
    text-align: left; /* Aligns the price text to the right */
}


.input-group-text.igtxl
{
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
}

.sg-item{
    cursor: pointer;
}


.sg-item{
    border: 1px solid #dddddd;
}

.sg-item:hover{
    border: 1px solid #999999;
}

.card-suggest{
    margin-bottom: 12px;
}

.card-suggest .card-body{
    padding: 5px 10px;

}

.card-suggest .card-body img{
    max-width: 40px;
    max-height: 40px;
}


.mini-stats .card-body{
    padding: 5px 10px;
}

.mini-stats{
    margin-right: 10px;
    width: 100px;
}

.mini-stats h5{
    font-size: 14pt;
    font-weight: bold;
}

.table-compact{
    font-size: 9pt;
}